<template>
	<div class="loginBox">
		<div class="formBox">
			<p class="title">易视界智能化平台</p>
			<el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="demo-ruleForm">
				<el-form-item label="" prop="username">
					<el-input v-model="loginForm.username" placeholder="请输入您的账号" @keyup.enter.native="handleLogin"
						prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item label="" prop="password">
					<el-input v-model="loginForm.password" type="password" placeholder="请输入您的密码" @keyup.enter.native="handleLogin"
						prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleLogin">{{!loading ? '登 录' : '登 录 中...'}}</el-button>
				</el-form-item>
			</el-form>
			<p class="textP">
				<span>忘记密码</span><span style="margin: 0 15px;">|</span><span @click="toRegister">立即注册</span>
			</p>
		</div>
	</div>
</template>

<script>
	import {
		getCodeImg
	} from "@/api/modules/user";
	import Cookies from "js-cookie";
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt";
	import api from "@/api";
	import {
		ElMessage
	} from "element-plus";
	export default {
		name: "Login",
		data() {
			return {
				codeUrl: "",
				loginForm: {
					username: "",
					password: "",
					rememberMe: false,
					// code: "",
					// uuid: ""
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "请输入您的账号"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "请输入您的密码"
					}],
					// code: [{
					// 	required: true,
					// 	trigger: "change",
					// 	message: "请输入验证码"
					// }]
				},
				loading: false,
				// 验证码开关
				captchaOnOff: false,
				// 注册开关
				register: false,
				redirect: undefined
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},
		created() {
			// this.getCode();
			// this.getCookie();
		},
		methods: {
			getCode() {
				getCodeImg().then(res => {
					this.captchaOnOff =
						res.captchaOnOff === undefined ? true : res.captchaOnOff;
					if (this.captchaOnOff) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.loginForm.uuid = res.uuid;
					}
				});
			},
			getCookie() {
				const username = Cookies.get("username");
				const password = Cookies.get("password");
				const rememberMe = Cookies.get("rememberMe");
				this.loginForm = {
					username: username === undefined ? this.loginForm.username : username,
					password: password === undefined ? this.loginForm.password : decrypt(password),
					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
				};
			},
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true;
						if (this.loginForm.rememberMe) {
							Cookies.set("username", this.loginForm.username, {
								expires: 30
							});
							Cookies.set("password", encrypt(this.loginForm.password), {
								expires: 30
							});
							Cookies.set("rememberMe", this.loginForm.rememberMe, {
								expires: 30
							});
						} else {
							Cookies.remove("username");
							Cookies.remove("password");
							Cookies.remove("rememberMe");
						}
						api.user
							.login(this.loginForm)
							.then(res => {
								if (res.code) {
									this.$store.dispatch("user/login", res.data);
									// setTimeout(()=>{
									// 	this.$router.push("/index");
									// },1000)
									this.getInfo();
								} else {
									ElMessage({
										type: "error",
										message: res.msg
									});
									this.$router.push("/loginText");
								}
							})
							.catch(err => {
								ElMessage({
									type: "error",
									message: err.msg
								});
								this.$router.push("/loginText");
								if (this.captchaOnOff) {
									this.getCode();
								}
							});
					}
				});
			},
			getInfo() {
				this.$store.dispatch("user/getInfo").then(() => {
					this.$router.push({
						path: "/index"
					});
				});
			},
			toRegister() {
				this.$router.push({
					path: "/register"
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.loginBox {
		height: 100%;
		background: url("../../assets/images/login-bg3.png") no-repeat;
		background-size: cover;

		.formBox {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600px;
			max-height: 800px;
			padding: 0 30px;
			background: #fff;
			border-radius: 15px;
			box-shadow: 0px 0px 15px 3px #ddd;
			margin: 0 auto;

			.title {
				color: @theme;
				margin: 0;
				text-align: center;
				font-weight: bold;
				font-size: 30px;
				padding: 40px 0 30px;
			}

			.textP {
				text-align: center;
				color: @theme;
				padding-bottom: 15px;

				span {
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			::v-deep(.el-form-item) {
				margin: 0 30px 30px;

				.el-input__wrapper {
					border-radius: 50px;
					margin-bottom: 5px;
					padding-top: 1px;
					padding-bottom: 1px;
					.el-icon {
						font-size: 24px;
					}

					.el-input__inner {
						height: 50px;
						padding-left: 0;
						border-radius: 50px;
					}
				}

				.el-button {
					width: 100%;
					background: @theme;
					border-radius: 50px;
					height: 50px;
					font-size: 18px;
				}
				input:-webkit-autofill,
				input:-webkit-autofill:hover,
				input:-webkit-autofill:focus { 
				  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; 
				  /* -webkit-text-fill-color: #fff; */
				  -webkit-transition-delay: 99999s; 
				  -webkit-transition: color  99999s ease-out, background-color  99999s ease-out;
				}
			}
		}
	}
</style>
